<template>
  <div class="dashboard-container">
    <div class="wrap">
      <div class="title">
        <svg id="svgBox-text">
          <defs>
            <linearGradient
              id="svg-text"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="10"
              x2="0"
              y2="50"
            >
              <stop offset="0" style="stop-color:#9ec7ff" />
              <stop offset="0.25" style="stop-color:#cfe3ff" />
              <stop offset="1" style="stop-color:#ffffff" />
            </linearGradient>
          </defs>
          <text text-anchor="middle" class="gradient-text" x="50%" y="70%">全国调用量数据分布</text>
        </svg>
      </div>
      <div class="content">
        <div class="left">
          <div class="box vertical">
            <span class="arc arc-tl" />
            <span class="arc arc-tr" />
            <span class="arc arc-br" />
            <span class="arc arc-bl" />
            <div class="box-body">
              <div class="title">总调用量</div>
              <div class="inner">
                <div class="inner-number">
                  150,250,384
                </div>
              </div>
            </div>
          </div>

          <div class="box level">
            <span class="arc arc-tl" />
            <span class="arc arc-tr" />
            <span class="arc arc-br" />
            <span class="arc arc-bl" />
            <div class="box-body">
              <!-- <div class="title">访问持卡库服务情况</div> -->
              <div class="inner bar-box">
                <div class="bar-contaner"><PiesChart/></div>
                <div class="bar-contaner"><PiesChartMid/></div>
                <div class="bar-contaner"><PiesChartRit/></div>
              </div>
            </div>
          </div>
          <div class="box rank">
            <span class="arc arc-tl" />
            <span class="arc arc-tr" />
            <span class="arc arc-br" />
            <span class="arc arc-bl" />
            <div class="box-body">
              <div class="title">调用量排行榜</div>
              <div class="inner rank-list">

                <el-scrollbar style="height:100%">
                  <ul class="rank-ul">
                    <li v-for="(item,index) in rankList" :key="index">
                      <div>
                        {{ index+1 }}
                      </div>
                      <div>
                        {{ item.city }}
                      </div>
                      <div :class="className(index)">
                        {{ item.number }}
                      </div>
                    </li>
                  </ul>
                </el-scrollbar>

              </div>
            </div>
          </div>
        </div>
        <div class="middle">
          <div class="box map">
            <span class="arc arc-tl" />
            <span class="arc arc-tr" />
            <span class="arc arc-br" />
            <span class="arc arc-bl" />
            <div class="box-body">
              <!-- <div class="title">访问持卡库服务情况</div> -->
              <div class="inner" style="height:100%">
                <MapChart />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
// 引入折线线图
require('echarts/lib/chart/line')
import LineChart from './components/LineChart'
import RadarChart from './components/RadarChart'
import PiesChart from './components/PiesChart'
import PiesChartMid from './components/PiesChartMid'
import PiesChartRit from './components/PiesChartRit'
import MapChart from './components/MapChart'
export default {
  name: 'DashboardAdmin',
  components: {
    LineChart,
    RadarChart,
    PiesChart,
    MapChart,
    PiesChartMid,
    PiesChartRit
  },
  data() {
    return {
      chart: '',
      rankList: [{ city: '江苏', number: 333221 }, { city: '北京', number: '44221' }, { city: '新疆', number: '32221' }, { city: '甘肃', number: '12321' }, { city: '湖南', number: '3332' }, { city: '湖北', number: '2223' }, { city: '江西', number: '1112' }]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    className(index) {
      if (index === 0) {
        return 'red'
      } else if (index === 1) {
        return 'green'
      } else if (index === 2) {
        return 'yellow'
      }
    },
    getData(val) {
      switch (val) {
        case 1:
          this.person = this.personData.hospital1
          break
        case 2:
          this.person = this.personData.hospital2
          break
        case 3:
          this.person = this.personData.hospital3
          break
        case 4:
          this.person = this.personData.hospital4
          break
        default:
          this.person = this.personData.hospital1
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.red{
  color: red;
}
.green{
  color: green;
}
.yellow{
  color: yellow;
}
.dashboard-container {
  height: 100vh;
  background-image: url("../../../assets/img/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  .wrap {
    display: flex;
    flex-direction: column;
    height: 100vh;
    .title {
      #svgBox-text {
        width: 100%;
        height: 75px;
      }
      .gradient-text {
        fill: url(#svg-text);
        font-size: 40px;
        font-weight: bolder;
      }
    }
    .content {
      flex: 1;
      display: flex;
      padding: 0 60px 65px;
      .box {
        position: relative;
        background-image: url("../../../assets/img/reseau.png");
        border: 1px solid #0e3776;
        border-radius: 10px;
        span.arc {
          display: inline-block;
          width: 10px;
          height: 10px;
          background-color: transparent;
          border: 1px solid #1d59b4;
        }
        span.arc.arc-tl {
          position: absolute;
          left: 2px;
          top: 2px;
          border-bottom: 0;
          border-right: 0;
          border-top-left-radius: 10px;
        }
        span.arc.arc-tr {
          position: absolute;
          right: 2px;
          top: 2px;
          border-bottom: 0;
          border-left: 0;
          border-top-right-radius: 10px;
        }
        span.arc.arc-br {
          position: absolute;
          right: 2px;
          bottom: 2px;
          border-top: 0;
          border-left: 0;
          border-bottom-right-radius: 10px;
        }
        span.arc.arc-bl {
          position: absolute;
          left: 2px;
          bottom: 2px;
          border-top: 0;
          border-right: 0;
          border-bottom-left-radius: 10px;
        }
        .box-body {
          height: 100%;
          .title {
            height: 50px;
            line-height: 50px;
            padding-left: 50px;
            background-image: url("../../../assets/img/arr.png");
            background-repeat: no-repeat;
            background-position: 20px 19px;
            font-size: 20px;
            color: #1fbff1;
          }
          .title + .inner {
            height: calc(100% - 50px);
          }
        }
      }
    }
    .content > div.left,
    .content > div.right {
      flex: 0 0 35%;
    }
    .content > div.middle {
      flex: 0 0 65%;
    }
    .content {
      div.left {
        .vertical {
          height: 150px;
          margin: 20px 0 15px;
          .inner-number{
            color: #fff;
            text-indent: 2em;
            font-size: 45px;
            line-height: 60px;
            font-weight: 900;
          }
        }
        .level {
          height: 200px;
          margin: 20px 0 15px;
          .bar-box{
            height: 100%;
            display: flex;
            .bar-contaner{
              height: 100%;
              flex:1
            }
          }
        }
        .rank {
          height: calc(100% - 410px);
          margin: 20px 0 15px;
          .el-scrollbar__view {
    height: calc(100% - 20px);
}
          .rank-list{
            height: 100%;
            .rank-ul{
              li:nth-child(2n-11){
                background-color:rgba(0,23,4,.2);
              }
              li{
                color:#fff;
                display: flex;
                height: 35px;
                line-height: 35px;
                text-align: center;
                div:nth-child(1){
                  flex:1;
                }
                div:nth-child(2){
                  flex:3;
                }
                div:nth-child(3){
                  flex:6;
                }
              }
            }
          }
        }
      }
      div.middle{
        .map{
           margin: 20px 0 15px 20px;
           height: calc(100% - 20px);
        }
      }
    }
  }
}
.echarts-box {
  width: 100%;
  height: 348px;
  background-color: #fff;
}
.item-wrap {
  margin-bottom: 10px;
  box-sizing: border-box;
  & .el-row .el-col {
    padding: 10px 20px;
    box-sizing: border-box;
    & .item {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 70px;
      padding: 0 20px;
      box-sizing: border-box;
      background-color: #fff;
      color: #666;
      box-shadow: 0 0 10px rgba(10, 10, 10, 0.1);
      cursor: pointer;
      & > i {
        color: rgb(12, 212, 226);
        font-size: 30px;
        transition: 0.5s;
      }
      & > span {
        font-size: 16px;
        font-weight: 700;
      }
    }
    & .item:hover {
      background-color: rgb(236, 246, 255);
    }
  }
}
.echart-list {
  margin-top: 20px;
  & .el-col {
    margin-bottom: 15px;
    & .echart-list-item {
      height: 300px;
      background-color: #fff;
    }
  }
}
</style>
